<!DOCTYPE html>
<html lang="en">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
      name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>OA-app Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/dist/css/oa-app.css">
<head>

</head>
<body>
<div id="app">
    <table class="oa-table ">
        <thead>
            <tr class="oa-table-title">
                <th>蓝色表头</th>
            </tr>
        </thead>
    </table>
    <table class="oa-table ">
        <thead>
            <tr class="oa-table-title-gray">
                <th style="width:35px;">序号</th>
                <th style="width: 100px">超出隐藏</th>
                <th style="text-align: left">俩行显示</th>
                <th style="width: 50px">创建人</th>
                <th style="width: 50px">操作</th>
            </tr>
        </thead>
    </table>
    <table class="oa-table">
        <tbody>
            <tr class="oa-lineTwo-H">
                <td style="width:35px;">1</td>
                <td style="width: 100px" class="oa-lineOne" @click.stop="showMore($event.target)">(注：需指定宽度) 内容内容内容内容内容内容内容内容内容内容内容内容</td>
                <td  style="text-align: left" ><div class="oa-lineTwo" @click.stop="showMore($event.target)">默认设置在36行高下俩行显示。其他行高应用场景（设置max-height为总高度，设置line-height为单行高度，需加'!important'）</div></td>
                <td style="width: 50px"><div class="oa-name">李冰</div></td>
                <td style="width: 50px" class="oaColor">确定</td>
            </tr>
            <tr class="oa-lineTwo-H">
                <td>1</td>
                <td>附件</td>
                <td>
                    <div class="oa-fj" @click="lookFj(fj.attrUrl)">
                        <b :class="fjStyle(fj.attrName)"></b>
                        <div class="name"  :title="fj.attrName">
                            {{fj.attrName}}
                        </div>
                        <div class="del">删除</div>
                    </div>
                </td>
                <td><button class="oa-btn">上传</button></td>
                <td></td>
            </tr>
        </tbody>
    </table>



</div>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="https://file.ggxqce.com/web/axios.min.js"></script>
<script src="/dist/js/newOaApp.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            selectIndex:0,
            fj:{
                attrUrl:"https://office-auto.oss-cn-beijing.aliyuncs.com/images/201903/16/d0f1494a666e4e38b8d9bab81d4a4d46/安徽瀛湖蔡智星大区周（3.9-3.15）总结ppt.pptx",
                attrName:"安徽瀛湖蔡智星大区周（3.9-3.15）总结ppt.pptx"
            }
        },
        methods: {
            showMore: function (event) {
                var el = event
                var text = el.innerText;
                if (text != "") {
                    text = "<i></i>" + text;
                    var mydiv = document.getElementById("oa-more");
                    if (!mydiv) {
                        var div = document.createElement("div");
                        div.setAttribute("id", "oa-more");
                        document.body.appendChild(div);
                        mydiv = document.getElementById("oa-more");
                    }
                    if(mydiv.offsetParent === null){
                        mydiv.style.display = 'block';
                        mydiv.innerHTML = text;
                        mydiv.style.width = el.offsetWidth + 'px';
                        mydiv.style.left = el.getBoundingClientRect().left + 'px';
                        console.log(el.height)
                        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop || 0;
                        mydiv.style.top = ( scrollTop+el.getBoundingClientRect().top + el.offsetHeight + "px")
                    }else{
                        mydiv.style.display = 'none';
                    }

                }else{
                    var mydiv = document.getElementById("oa-more");
                    mydiv.style.display = 'none';
                }

                document.onclick = function () {
                    var mydiv = document.getElementById("oa-more");
                    if (mydiv) {
                        mydiv.style.display = "none";
                    }
                };
            },
            fjStyle: function (fjName) {
                //传入附件名称 返回对应附件类型的样式用于展示
                if (fjName) {
                    var type = fjName.substring(fjName.lastIndexOf('.') + 1);
                    return 'img fj-' + type
                }
                return 'img'
            }
        }
    })
</script>
<script>
    //全局点击事件  查看是否有查看更多 有则隐藏


</script>
</body>
</html>